<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<html>
<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="pinpin社保" />
		<meta name="description" content="pinpin社保" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>社保运营后台-政务查询类型</title>
		<link rel="stylesheet" href="/as/css/bootstrap.css" />
		<link rel="stylesheet" href="/as/css/layout.css" />
	<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
	<link rel="stylesheet" href="/as/jquery-upload-file/css/jquery.fileupload.css">
	<link rel="stylesheet" href="/as/jquery-upload-file/css/jquery.fileupload-ui.css">
	<style type="text/css">
		.bar {
		    height: 18px;
		    background: green;
		}
	</style>
	<%@ include file="/WEB-INF/jsp/common/common.jsp" %>
	<script type="text/javascript">
	var host = document.domain;
	var port = location.port;
	var host_port = host; // 用于上传图片。
	if (port > 1000) {
		host_port = host_port + ":8500";
	}
	</script>
</head>
<body>
	<div id="wrapper">
		<%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
		<div id="page-wrapper">
        	<div class="row">
                <div class="col-lg-12">
                    <!-- 路径导航 -->
                    <ol class="breadcrumb">
				      <li>政务查询类型</li>
				      <li><a href="${ad_uri }">政务广告</a></li>
				    </ol>
                </div>
            </div>
            <div class="row">
            	<div class="col-lg-12">
            		<div class="panel panel-default">
            			<div class="panel-body">
        			    	<div class="form-inline dt-bootstrap no-footer">
                            <div class="row">           
                                <div class="col-lg-1">
                                	&nbsp; <input id="addBtn" class="btn btn-primary" type="button" value="新增政务类型" onclick="javascript:toAdd()">
                                </div>
                                <div class="col-lg-11">
	                                <div class="alert alert-success">
	                            	</div>
                                </div>
                            </div>
                            <!-- 表格列表 -->
                            <div class="row">
                                <div class="col-lg-12">
				            		<div class="panel panel-default">
				            			<div class="panel-body">
		                                    <table class="table table-striped table-bordered table-hover no-footer table-title" role="grid">
		                                        <thead id="scrollTr">
		                                            <tr>
		                                                <th>ID</th>
		                                                <th>类型名称</th>
		                                                <th>图片</th>
		                                                <th>位置</th>
		                                                <th></th>
		                                            </tr>
		                                        </thead>
		                                        <tbody>
		                                        <c:forEach items="${typeList }" var="it">
		                                        	<tr role="row">
		                                        		<td>${it.id }</td>
		                                        		<td>${it.typeName }</td>
		                                        		<td>
		                                        			<img id="img${it.id }" width="64px" height="64px">
		                                        			<script type="text/javascript">
		                                        				$("#img${it.id}").attr("src", document.location.protocol+"//"+ host + "${it.img_path }");
		                                        			</script>
		                                        		</td>
		                                        		<td>${it.displayPos }</td>
		                                        		<td>
		                                        			<input id="editBtn${it.id }" class="btn btn-sm btn-info" type="button" value="修改" onclick="javascript:toEdit(${it.id})">
		                                        		</td>
		                                            </tr>
		                                        </c:forEach>
		                                        </tbody>
		                                    </table>
		                                </div>
				                    </div>
                                <!-- <label></label>-->
                                </div>
                            </div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
	</div>
	<div id="addBox" style="display:none;width:360px">
		<div class="row">
        	<div class="col-lg-12">
				<form action="" name="addForm" id="addForm" method="post">
					<input type="hidden" class="form-control" id="typeId" name="typeId" value="0">
					<input type="text" class="form-control" id="title" name="title"  placeholder="类型名称"><br/>
					<div class="row fileupload-buttonbar">
					 	<div class="col-lg-6">
							 <span class="btn btn-success fileinput-button">
					             <i class="glyphicon glyphicon-plus"></i>
					             <span>选择图片文件...</span>
					             <input type="file" name="files" id="fileupload" />
					         </span>
					     </div>
					     <div class="col-lg-6" style="padding-top:10px">
					         <div id="progress" style="background:#E6E6E6">
					             <div class="bar" style="width:0%;"></div>
					         </div>
				         </div>
			         </div>
					<input type="hidden" class="form-control" id="img_path" name="img_path">
			         <br/>
				
					<input type="number" class="form-control" id="position" name="pos" placeholder="位置（1~125数字）"><br/>
					<br>
					<button type="button" class="btn btn-primary btn-sm" onclick="javascript:add();">确定</button>
				</form>
			</div>
		</div>
	</div>
</body>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="/as/jquery-upload-file/vendor/jquery.ui.widget.js"></script>
<!-- The basic File Upload plugin -->
<script src="/as/jquery-upload-file/jquery.fileupload.js"></script>
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="/as/jquery-upload-file/cors/jquery.xdr-transport.js"></script>
<![endif]-->
<script type="text/javascript">
var add_uri = "${add_uri}";
var position_uri = "${position_uri}";
var to_edit_uri = "${to_edit_uri}";
var upload_img_uri =document.location.protocol+"//" + host_port + "/sbw/upload/zwcx/v1"; // protocol == "https:"
$(function () {

	$('#fileupload').fileupload({
        url: upload_img_uri,
        type:"POST",
        dataType: 'JSON',
        //跨域
　　　　 //forceIframeTransport: true,
        add: function (e, data) {
        	//$("#upload_msg").text("正在上传……");
        	data.submit().error(function (jqXHR, textStatus, errorThrown) {
        		//$("#upload_msg").css('color','red').text("上传失败 ( "+textStatus+" : "+errorThrown+" )");
        		$('#progress .bar').css('width', '0%');
        	});
        }, 
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
        },
        done: function (e, data) {
            $("#img_path").val(data.result.data);
			notice("上传成功: " + data.result.data, 1);
        }
    });
    
});


function toAdd() {
	$("#typeId").val("0");
	var content=document.getElementById("addBox");
    dialog({
  	  title: '新增',
  	  content: content,
  	  follow: document.getElementById("addBtn"),
  	  quickClose:true}).show();
}

function add() {
	var data = $("#addForm").serialize();
	$.post(add_uri, data, function(ret,status){
		if (ret.code==200) {
			notice("提交成功。", 1);
			document.location.reload();
		} else {
			notice(ret.code + "  " + ret.msg);
		}
		$("#typeId").val("0");
	});
}

function toEdit(typeId) {
	notice("正在加载数据。", 1);
	$.post(to_edit_uri, "typeId="+typeId, function(ret,status){
		var d = ret.data;
		$("#typeId").val(d.id);
		$("#title").val(d.typeName);
		$("#img_path").val(d.img_path);
		$("#position").val(d.displayPos);
	});
	var content=document.getElementById("addBox");
    dialog({
  	  title: '修改',
  	  content: content,
  	  follow: document.getElementById("editBtn"+typeId),
  	  quickClose:true}).show();
}

function updatePos(idv, posV) {
	var data = {id: idv, pos: posV};
	$.post(position_uri, data, function(ret,status){
		if (ret.code==200) {
			notice("上下架操作成功。", 1);
			document.location.reload();
		} else {
			notice(ret.code + "  " + ret.msg);
		}
	});
}
</script>
</html>